<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
    <script src="/jquery/jquery-3.6.0.min.js"></script>
    <script src="/layui-v2.6.8/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui-v2.6.8/layui/css/layui.css">
    <script>
        $(function (){
            let tokenName, tokenValue;

            $.get({
                url: "/token",
                success: function (result){
                    tokenName = result.tokenName;
                    tokenValue = result.tokenValue;
                    layer.msg(tokenName+"  "+tokenValue);

                    $("#btn").click(function (){
                        $.ajax({
                            type: "get",
                            url: "/hello",
                            headers: {
                                tokenName: tokenName,
                                tokenValue: tokenValue
                            },
                            data: {
                                name: $("#name").val(),
                                age: $("#age").val()
                            },
                            success: function (result){
                                layer.msg(result.status.toString())
                            }
                        })
                    })
                }
            })
        })
    </script>
</head>
<body>
    <div th:align="center">
        <div class="layui-form-item">
            <label class="layui-form-label">name</label>
            <div class="layui-input-block">
                <input type="text" id="name" required  lay-verify="required" placeholder="请输入name" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">age</label>
            <div class="layui-input-inline">
                <input type="text" id="age" required lay-verify="required" placeholder="请输入age" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button id="btn" class="layui-btn">提交</button>
            </div>
        </div>
    </div>
</body>
</html>